<template>
  <div id="userManage">
    <div class="user-header">
      <h2 style="margin-left: 20px">用户管理</h2>
      <ul class="user-header-title">
        <router-link to="/homePageIndex" class="goBack">
          <li><i class="el-icon-discount"></i> 首页</li>
        </router-link>
        <li>/ 用户管理</li>
      </ul>
    </div>
    <div class="user-content">
      <div class="user-content-ft">
        <el-button class="addMsg" @click="addMsg"
          ><i class="el-icon-plus"></i> 新增</el-button
        >
        <el-button class="modifyMsg" @click="modifyMsg"
          ><i class="el-icon-refresh"></i> 修改</el-button
        >
        <el-button class="upMsg" @click="upMsg"
          ><i class="el-icon-loading"></i> 刷新</el-button
        >
        <input
          type="search"
          class="user-content-search"
          placeholder=" 按名称查找"
        />
        <p class="user-content-search-pic" @click="user-search">
          <i class="el-icon-search"></i>
        </p>
      </div>
      <div class="user-content-table">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserManage",
  data() {
    return {
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  },
  methods: {},
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
#userManage {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1270px;
  height: 690px;
  /* background-color: hotpink; */
}
.user-header {
  position: relative;
  width: 1270px;
  height: 60px;
  line-height: 60px;
  /* background-color: rgb(247, 146, 146); */
}
.user-header-title {
  list-style: none;
}
.goBack {
  text-decoration: none;
}
.user-header .user-header-title li {
  position: relative;
  height: 50px;
  line-height: 50px;
  /* background-color: chartreuse; */
}
.user-header .user-header-title li:nth-child(1) {
  top: -55px;
  left: 1090px;
  width: 60px;
  font-size: 18px;
  color: #080808;
  font-weight: bold;
}
.user-header .user-header-title li:nth-child(1):hover {
  color: #00c0ff;
}
.user-header .user-header-title li:nth-child(2) {
  top: -105px;
  left: 1160px;
  width: 80px;
  font-weight: bold;
  color: gray;
}

.user-content {
  position: relative;
  left: 20px;
  width: 1220px;
  height: 600px;
  border: 2px solid rgb(197, 196, 196);
  border-top: 5px solid rgb(179, 177, 177);
  border-radius: 5px;
  /* background-color: gray; */
}
.user-content-ft {
  height: 45px;
  line-height: 45px;
  border-bottom: 2px solid rgb(194, 193, 193);
  /* background-color: indianred; */
}
.addMsg {
  width: 70px;
  height: 30px;
  color: white;
  border-radius: 5px;
  border: none;
  margin-left: 20px;
  background-color: #22b86c;
}
.modifyMsg {
  width: 70px;
  height: 30px;
  color: white;
  border-radius: 5px;
  border: none;
  margin-left: 10px;
  background-color: #22b86c;
}
.upMsg {
  width: 70px;
  height: 30px;
  color: white;
  border-radius: 5px;
  border: none;
  background-color: #22b86c;
}
.user-content-search {
  position: relative;
  top: 0px;
  left: 770px;
  width: 150px;
  height: 30px;
  border-radius: 5px 0px 0px 5px;
  border: 1px solid gray;
}
.user-content-search-pic {
  position: relative;
  top: -36px;
  left: 1170px;
  width: 30px;
  height: 29px;
  text-align: center;
  line-height: 30px;
  border: 1px solid gray;
  border-left: none;
  border-radius: 0px 5px 5px 0px;
  background-color: rgb(214, 212, 212);
}
.user-content-search-pic:hover {
  background-color: rgb(221, 150, 150);
}

.user-content-table {
  width: 1200px;
  height: 520px;
  position: relative;
  top: 15px;
  left: 10px;
  /* background-color: rgb(209, 208, 208); */
}
</style>